<template>
	<a-modal
		dialogClass="new-version-tips"
		v-model:visible="showModal"
		centered
		closable
		:keyboard="false"
		:maskClosable="false"
		:width="440"
		:footer="null"
		:afterClose="afterClose"
	>
		<div class="content">
			<img
				class="content-img"
				src="@/assets/images/new-version-tips.svg"
				alt=""
			/>
			<div class="content-text">
				<p class="titles">
					<span class="version">3.0</span>
					版本全新升级啦！
				</p>
				<p class="tips">服务编排、连接器、自定义组件等全新功能与优化</p>
			</div>
			<div class="content-button" @click="goToUpdateDoc">立即查看更新内容</div>
		</div>
	</a-modal>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { apiInit } from '@/services'
import { useStore } from 'vuex'
const props = defineProps({
	arr: {
		type: Array,
	},
})
const api = apiInit()
const store = useStore()
//modal弹窗状态
const showModal = ref(false)
//查看更新文档
const goToUpdateDoc = () => {
	showModal.value = false
	window.open(
		'https://baiteda.yuque.com/docs/share/992b8563-40f0-4f82-856e-d596c4058da4?#',
		'_blank'
	)
}
store.commit('SET_SHOW_VERSION_TIPS_END', true)
//modal关闭回调
const afterClose = async () => {
	store.commit('SET_SHOW_VERSION_TIPS_END', true)
	// 存储已读状态
	await api.baseAuto.AddGuideUserPrivateV1POST({
		payload: ['portal_new_version_3.0'],
	})
}
</script>
<style lang="less">
.new-version-tips {
	.ant-modal-body {
		padding: 0;
		max-height: calc(80vh - 20px);
		overflow-y: unset;
	}
	.ant-modal-content {
		overflow: hidden;
		.ant-modal-close {
			color: #fff;
		}
	}
	.content {
		.content-img {
			width: 100%;
			// border-top-left-radius: 8px;
			// border-top-right-radius: 8px;
		}
		.content-text {
			text-align: center;
			.titles {
				font-family: 'PingFang SC';
				font-style: normal;
				font-size: 26px;
				line-height: 28px;
				font-weight: 500;
				text-align: center;
				letter-spacing: 0.01em;
				color: #1f2329;
				margin-top: 15px;
				.version {
					font-size: 42px;
					font-weight: 600;
				}
			}
			.tips {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 15px;
				line-height: 28px;
				text-align: center;
				letter-spacing: 0.01em;
				color: #646a73;
				margin-top: 15px;
			}
		}
		.content-button {
			width: 336px;
			height: 48px;
			line-height: 48px;
			background: #4c78fc;
			border-radius: 8px;
			text-align: center;
			color: #fff;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 16px;
			margin: 30px auto 43px;
			cursor: pointer;
			&:hover {
				opacity: 0.8;
			}
		}
	}
}
</style>
